<template>
  <div style="background-color: lightblue">
    <!--   版心 -->
    <div style="width: 1600px;margin: 0 auto;">
      <!--   顶部   -->
      <div>
        <el-container>
          <!--    头      -->
          <!--    内容      -->
          <el-main>
            <!--       提示     -->
            <div style="font-size: 30px ;line-height: 40px;position: relative"><el-icon size="40px"><Van /></el-icon><span style="position: absolute;left: 50px;">可配送到全国1000多个城市，市区内免配送费！！！</span></div>
            <!--        标签页    -->
            <el-tabs type="border-card"  v-model="yemian" >
              <!--            首页  -->
              <el-tab-pane label="首页"  name="first">
                <!--              1楼  -->
                <div style="width: 100%;">
                  <div>
                    <el-container>
                      <!--                   左边的导航项   -->
                      <el-aside width="300px">
                        <div>
                          <p >电脑整机</p>
                          <ul style=" list-style: none;overflow: hidden;">
                            <li style="float: left;margin-right: 10px;"><a href="#">笔记本</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">台式机</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">游戏机</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">一体机</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">服务器</a></li>
                          </ul>
                          <p>电脑配件</p>
                          <ul style=" list-style: none;overflow: hidden;">
                            <li style="float: left;margin-right: 10px;"><a href="#">CPU</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">SSD硬盘</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">显示器</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">显卡</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">组装电脑</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">机箱</a></li>
                          </ul>
                          <p >外设/游戏</p>
                          <ul style=" list-style: none;overflow: hidden;">
                            <li style="float: left;margin-right: 10px;"><a href="#">键盘</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">鼠标</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">u盘</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">移动硬盘</a></li>
                            <li style="float: left;margin-right: 10px;"><a href="#">游戏设备</a></li>
                          </ul>
                        </div>
                      </el-aside>
                      <!--                 轮播图     -->
                      <el-main>
                        <el-carousel :interval="5000" motion-blur pause-on-hover height="auto">
                          <el-carousel-item v-for="item in lunbotu" style="height: auto;">
                            <img :src="item" style="width: 100%;height: 100%;">
                          </el-carousel-item>
                        </el-carousel>
                      </el-main>
                      <!--                   个人信息状态   -->
                      <el-aside width="300px">
                        <div>
                          <div style="text-align: center">
                            <div style="width: 100px;height: 100px;overflow: hidden;border-radius: 50%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);margin: 20px auto;">
                              <img src="/1.jpg" alt="" style="width: 100%;height: auto;">
                            </div>
                            <h2>Hi~欢迎您</h2>
                            <el-row :gutter="10" style="margin: 0 5px;margin-top: 40px; ">
                              <el-col :span="12"><el-button type="danger" round @click="dl">登录</el-button></el-col>
                              <el-col :span="12"><el-button type="info" round @click="zc">注册</el-button></el-col>
                            </el-row>
                            <el-row :gutter="10" style="margin: 0 5px; margin-top: 40px;">
                              <el-col :span="6" @click="geren"><el-icon size="40px"><User /></el-icon>
                                <br><span>个人中心</span></el-col>
                              <el-col :span="6" @click="dd"><el-icon size="40px"><Goods /></el-icon>
                                <br><span>我的订单</span></el-col>
                              <el-col :span="6"><el-icon size="40px"><Star /></el-icon>
                                <br><span>我的收藏</span></el-col>
                              <el-col :span="6"><el-icon size="40px"><Clock /></el-icon>
                                <br><span>我的足迹</span></el-col>
                            </el-row>
                            <div style="position:relative; top:20px;display: flex; flex-direction: column;">
                              <div v-for="p in shequ" :key="p.id" style="display: flex; align-items: center; height: 50px;">
                                <el-button size="small" style="flex-shrink: 0;">{{p.style}}</el-button>
                                <a href="#" style="flex: 1; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 10px;">{{p.title}}</a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-aside>
                    </el-container>
                  </div>
                </div>
                <!--              2楼  -->
                <div style="width: 100%;">
                  <!--                         预览 -->
                  <div class="waterfall-container" @scroll="checkScroll" ref="container">
                    <el-row v-for="(row, rowIndex) in groupedItems" :key="rowIndex" class="card-row">
                      <el-col
                          v-for="(item, colIndex) in row"
                          :key="colIndex"
                          :span="6"
                          class="card-col"
                      >
                        <el-card class="fixed-size-card">
                          <!-- 图片 -->
                          <img :src="item.image" alt="Card Image" class="card-image">
                          <!-- 标题 -->
                          <div class="card-header">
                            <h3>{{ item.title }}</h3>
                          </div>
                          <!-- 其他内容，如描述、标签等 -->
                          <div class="card-content">
                            <!-- 假设有一个描述字段 -->
                            <p>{{ item.description }}</p>
                            <!-- 假设还有一些标签 -->
                            <el-tag v-for="tag in item.tags" :key="tag" type="info">{{ tag }}</el-tag>
                          </div>
                        </el-card>
                      </el-col>
                    </el-row>
                    <!-- 加载提示 -->
                    <div v-if="isLoading" class="loading-indicator">Loading...</div>
                  </div>
                </div>
              </el-tab-pane>
              <!--            排行  -->
              <el-tab-pane label="排行" name="ph">
                <div class="waterfall-container" @scroll="checkScroll" ref="container">
                  <el-row v-for="(row, rowIndex) in groupedItems2" :key="rowIndex" class="card-row2">
                    <el-col
                        v-for="(item, colIndex) in row"
                        :key="colIndex"
                        :span="24"
                        class="card-col">
                      <el-card class="fixed-size-card">
                        <div style="width: 50%;float: left;">
                          <!-- 图片 -->
                          <img :src="item.image" alt="Card Image" class="card-image2">
                          <!-- 标题 -->
                          <div class="card-header">
                            <h3>{{ item.title }}</h3>
                          </div>
                          <!-- 其他内容，如描述、标签等 -->
                          <div class="card-content">
                            <!-- 假设有一个描述字段 -->
                            <p>{{ item.description }}</p>
                            <!-- 假设还有一些标签 -->
                            <el-tag v-for="tag in item.tags" :key="tag" type="info">{{ tag }}</el-tag>
                          </div>
                        </div>
                        <div style="background-color: rebeccapurple;height: 100%;width: 50%;float: right;">
                          <!-- 标题 -->
                          <div class="card-header">
                            <h3>{{ item.title }}</h3>
                          </div>
                          <!-- 其他内容，如描述、标签等 -->
                          <div class="card-content">
                            <!-- 假设有一些描述字段 -->
                            <p>{{ item.description }}</p>
                            <p>{{ item.description }}</p>
                            <p>{{ item.description }}</p>
                            <p>{{ item.description }}</p>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                  <!-- 加载提示 -->
                  <div v-if="isLoading" class="loading-indicator">Loading...</div>
                </div>
              </el-tab-pane>
              <!--             新品  -->
              <el-tab-pane label="新品" name="xp">
                <el-row :gutter="10">
                  <el-col :span="6" v-for="p in productArrxp" style="margin:10px 0;">
                    <el-card style="padding-bottom:20px;">
                      <img :src="p.url" style="width:100%;height:100%;">
                      <p>{{p.title}}</p>
                      <div>
                        <span style="float:left;color:red;font-size: larger">现价：¥{{p.price}}</span>
                        <span style="float: right;">销量:{{p.saleCount}}</span>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <!--              特价 -->
              <el-tab-pane label="特价" name="tejia">
                <el-row :gutter="10">
                  <el-col :span="6" v-for="p in productArr" style="margin:10px 0;">
                    <el-card style="padding-bottom:20px;">
                      <img :src="p.url" style="width:100%;height:100%;">
                      <p>{{p.title}}</p>
                      <div>
                        <span style="float:left;color:red;font-size: larger">现价：¥{{p.price}}<s style="font-size: large;margin: 20px;">历史价格:{{p.oldPrice}}</s></span>
                        <span style="float: right;">销量:{{p.saleCount}}</span>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-main>
          <!--    底部      -->

        </el-container>
      </div>
    </div>
  </div>


</template>
<script setup>
import {ref, onMounted, onUnmounted, computed, onBeforeUnmount, nextTick} from 'vue';
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";


//获取当前登录用户
const user = ref(getUser());
// 加载页面
onMounted(()=>{
  loadLunbotu();
})
// 轮播图
const lunbotu = ref([]);
// 加载首页轮播图的数据
const loadLunbotu = ()=>{
  axios.get(BASE_URL+"/v1/frist/lunbotu").then((response)=>{
    if(response.data.code != 2000){
      ElMessage.error(response.data.msg);
    }
    lunbotu.value = response.data;
  })
}
// 加载首页的商品
const loadShouye = ()=>{
  axios.get(BASE_URL+"v1/first/shouye").then((response)=>{
    if (response.data.code == 2000){
      items.value=response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
// 登录
const dl = ()=>{
  router.push('/login');
}
// 注册
const zc = ()=>{
  router.push('/reg');
}
// 点击
const dd = ()=>{
    // 缺少判断登录用户功能
    alert('请先登录!');
    router.push('/login');
}
const geren =()=>{
  // 缺少判断登录用户功能
  alert('请先登录!');
  router.push('/login');
}

const yemian = ref('first');
const shequ =ref([
  {style:'规则',title:'【第一人称视角】当你被至高天英雄连环处决!第二..'},
  {style:'规则',title:'【第一人称视角】当你被至高天英雄连环处决!第二..'},
])
const productArr = ref([
  {title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/2.jpg", saleCount: 2342},
  {title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装", price: 233, oldPrice: 598, url: "/1.jpg", saleCount: 2342},
  {title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季", price: 233, oldPrice: 598, url: "/1.jpg", saleCount: 2342},
  {title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚", price: 233, oldPrice: 598, url: "/1.jpg", saleCount: 2342},
  {title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花", price: 233, oldPrice: 598, url: "/1.jpg", saleCount: 2342},
  {title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领", price: 233, oldPrice: 598, url: "/1.jpg", saleCount: 2342},
  {title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦", price: 233, oldPrice: 598, url: "/2.jpg", saleCount: 2342},
  {title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/1.jpg", saleCount: 2342},
  {title: "imone2021秋款黑色小西装外套女韩版学生宽松学", price: 233, oldPrice: 598, url: "/1.jpg", saleCount: 2342},
  {title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫", price: 233, oldPrice: 598, url: "/2.jpg", saleCount: 2342},
  {title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修", price: 233, oldPrice: 598, url: "/2.jpg", saleCount: 2342},
  {title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色", price: 233, oldPrice: 598, url: "/1.jpg", saleCount: 2342}]);
const productArrxp = ref([
  {title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, url: "/2.jpg", saleCount: 2342},
  {title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, url: "/2.jpg", saleCount: 2342},
  {title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, url: "/2.jpg", saleCount: 2342},
  {title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, url: "/2.jpg", saleCount: 2342},
  {title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, url: "/2.jpg", saleCount: 2342},
  {title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, url: "/2.jpg", saleCount: 2342},
  {title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装", price: 233,  url: "/1.jpg", saleCount: 2342},
  {title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装", price: 233,  url: "/1.jpg", saleCount: 2342},
  {title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装", price: 233,  url: "/1.jpg", saleCount: 2342},
  {title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装", price: 233,  url: "/1.jpg", saleCount: 2342},
  {title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装", price: 233,  url: "/1.jpg", saleCount: 2342},
])


const groupedItems2 = computed(() => {
  const chunkSize = 1;
  const chunked = [];
  for (let i = 0; i < items.value.length; i += chunkSize) {
    chunked.push(items.value.slice(i, i + chunkSize));
  }
  return chunked;
});

// 假设的模拟数据项
const items = ref([
  {id:'', imgUrl: '', title: '', description: '', tags: []}
]);



// 将数据项分成每4个一组的数组
const groupedItems = computed(() => {
  const chunkSize = 4;
  const chunked = [];
  for (let i = 0; i < items.value.length; i += chunkSize) {
    chunked.push(items.value.slice(i, i + chunkSize));
  }
  return chunked;
});
// 加载状态
const isLoading = ref(false);

// 加载更多数据的方法（模拟）
const loadMore = async () => {
  if (isLoading.value) return; // 如果已经在加载，则不执行
  isLoading.value = true; // 设置加载状态为 true

  // 模拟异步加载数据
  await new Promise(resolve => setTimeout(resolve, 2000)); // 假设需要2秒

  // 假设从服务器获取了更多数据
  const newData = [
    // ... 新数据项
  ];

  // 合并新数据到 items 中
  items.value.push(...newData);

  // 重置加载状态
  isLoading.value = false;
};

// 检查滚动位置
const checkScroll = () => {
  const container = ref.value;
  if (container) {
    const { scrollTop, clientHeight, scrollHeight } = container;
    // 当接近底部时加载更多数据，这里设置阈值为 200px
    if (scrollTop + clientHeight >= scrollHeight - 200) {
      loadMore();
    }
  }
};

// 挂载后监听滚动事件
onMounted(() => {
  const container = ref.value;
  if (container) {
    container.addEventListener('scroll', checkScroll);
    // 如果页面初始时就在底部附近，可能需要手动触发一次检查
    nextTick(() => checkScroll());
  }
});

// 组件卸载时移除滚动事件监听器
onBeforeUnmount(() => {
  const container = ref.value;
  if (container) {
    container.removeEventListener('scroll', checkScroll);
  }
});

</script>
<style scoped>
p {
  /*强制文字不换行*/
  white-space: nowrap;
  /*超出的文字部分隐藏*/
  overflow: hidden;
  /*溢出文字部分替换为省略号*/
  text-overflow: ellipsis;
}
.card-row {
  margin: 20px; /* 行与行之间的间距 */
}
.card-col {
  /* 如果需要，可以添加额外的样式 */
}
.fixed-size-card {
  /* 设置卡片的大小，例如宽度为100%且有一个固定的高度 */
  width: 100%;
  height: auto; /* 假设的高度值 */
  overflow: hidden; /* 如果内容超出高度则隐藏 */
}
.card-image {
  width: 100%;
  height: 200px;
  display: block;
}
.card-content {
  padding: 10px;
}
.loading-indicator {
  /* 加载提示的样式 */
  text-align: center;
  padding: 20px;
  margin-top: 20px;
  background-color: #f5f7fa;
}
.care-card-image2{
  width: 50%;
  height: 200px;
  display: block;
}
.card-row2 {
  margin: 50px; /* 行与行之间的间距 */
}
a{
  text-decoration: none;
  color: black;
}
a:hover{
  color: blue;
}
</style>